<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="$t('common.edit')"
    @open="open"
    @closed="handleClosed"
  >
    <el-form label-width="160px">
      <el-form-item label="发送显示名称">
        <el-input v-model="info.name" />
      </el-form-item>
      <el-form-item :label="$t('email.emailAddress')">
        <el-input v-model="info.emailAddress" />
      </el-form-item>
      <el-form-item :label="$t('email.apiKeyOrSecret')">
        <el-input v-model="info.secret" />
      </el-form-item>
      <el-form-item :label="$t('email.smtpServer')">
        <el-input v-model="info.host" />
      </el-form-item>
      <el-form-item :label="$t('email.port')">
        <el-input v-model="info.port" />
      </el-form-item>
      <el-form-item label="开启ssl" class="text-left">
        <el-switch v-model="info.ssl" />
      </el-form-item>
      <el-form-item label="每日最大发送数量" class="text-left">
        <el-input type="number" v-model="info.maxLastDaySendNum" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleConfirm">{{
        $t('table.confirm')
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { getAction, postAction } from '@/api/common'
export default {
  name: 'editAccount',
  props: {
    show: {
      required: true,
      type: Boolean,
    },
    id: {
      required: true,
      type: Number,
    },
  },
  data() {
    return {
      info: {
        name: '',
        emailAddress: '',
        secret: '',
        host: '',
        port: '',
        ssl: false,
        maxLastDaySendNum: 0,
      },
      dialogVisible: false,
      infoLoading: false,
    }
  },
  watch: {
    show(val: boolean) {
      this.dialogVisible = val
    },
  },
  methods: {
    async open() {
      this.infoLoading = true
      const res = await getAction(null, `emailConfig/info?id=${this.id}`)
      this.info = res.data
      this.infoLoading = false
    },
    resetInfo() {
      this.info = {
        emailAddress: '',
        secret: '',
        host: '',
        port: '',
        name: '',
        ssl: false,
        maxLastDaySendNum: 0,
      }
    },
    async handleConfirm() {
      const res = await postAction(this.info, 'emailConfig/edit')
      this.$message.success(this.$t('email.submitSuccessfully'))
      this.dialogVisible = false
      this.$emit('closeAction')
    },
    handleClosed() {
      this.$emit('update:show', false)
      this.resetInfo()
    },
  },
}
</script>

<style scoped></style>
